<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康数据仪表盘 | VigorLoop</title>
    <!--STYLESHEET-->
    <!--=================================================-->
    <!--Open Sans Font [ OPTIONAL ]-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700'
          rel='stylesheet' type='text/css'>
    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/bootstrap.min.css" rel="stylesheet">
    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/nifty.min.css" rel="stylesheet">
    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo-icons.min.css" rel="stylesheet">
    <!--Demo [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo.min.css" rel="stylesheet">
    <!--Morris.js [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/morris-js/morris.min.css" rel="stylesheet">
    <!--DataTables [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/datatables/media/css/dataTables.bootstrap.css" rel="stylesheet">
    <link href="/static/nifty/plugins/datatables/extensions/Responsive/css/dataTables.responsive.css" rel="stylesheet">
    <!--JAVASCRIPT-->
    <!--=================================================-->
    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="/static/nifty/plugins/pace/pace.min.css" rel="stylesheet">
    <script src="/static/nifty/plugins/pace/pace.min.js"></script>
    <!--jQuery [ REQUIRED ]-->
    <script src="/static/nifty/js/jquery-2.2.4.min.js"></script>
    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/bootstrap.min.js"></script>
    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/nifty.min.js"></script>
    <!--=================================================-->
    <!--Demo script [ DEMONSTRATION ]-->
    <script src="/static/nifty/js/demo/nifty-demo.min.js"></script>
    <!--Morris.js [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/morris-js/morris.min.js"></script>
    <script src="/static/nifty/plugins/morris-js/raphael-js/raphael.min.js"></script>
    <!--Sparkline [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!--Flot Chart [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/flot-charts/jquery.flot.min.js"></script>
    <script src="/static/nifty/plugins/flot-charts/jquery.flot.resize.min.js"></script>
    <script src="/static/nifty/plugins/flot-charts/jquery.flot.time.js"></script>
    <!--Flot Pie Chart [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/flot-charts/jquery.flot.pie.min.js"></script>
    <!--Easy Pie Chart [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/easy-pie-chart/jquery.easypiechart.min.js"></script>
    <!--DataTables [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/datatables/media/js/jquery.dataTables.js"></script>
    <script src="/static/nifty/plugins/datatables/media/js/dataTables.bootstrap.js"></script>
    <script src="/static/nifty/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
    <!--DataTables Sample [ SAMPLE ]-->
    <script src="/static/nifty/js/demo/tables-datatables.js"></script>
</head>

<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">
    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar">
        <div id="navbar-container" class="boxed">
            <!--Brand logo & name-->
            <!--================================-->
            <div class="navbar-header">
                <a href="" class="navbar-brand">
                    <img src="/static/nifty/img/logo.png" alt="VigorLoop Logo"
                         class="brand-icon">
                    <div class="brand-title">
                        <span class="brand-text">VigorLoop</span>
                    </div>
                </a>
            </div>
            <!--================================-->
            <!--End brand logo & name-->
            <!--Navbar Dropdown-->
            <!--================================-->
            <div class="navbar-content clearfix">
                <ul class="nav navbar-top-links pull-left">
                    <!--Navigation toogle button-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="tgl-menu-btn">
                        <a class="mainnav-toggle" href="#">
                            <i class="demo-pli-view-list"></i>
                        </a>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End Navigation toogle button-->
                </ul>
                <ul class="nav navbar-top-links pull-right">
                    <!--User dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li id="dropdown-user" class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
									<span class="pull-right">
										<i class="demo-pli-male ic-user"></i>
									</span>
                            <div class="username hidden-xs">
                                {% if user.is_authenticated %}{{ user.username }}{% else %}未登录用户{% endif %}</div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">
                            <!-- Dropdown heading -->
                            <div class="pad-all bord-btm">欢迎使用
                                VigorLoop！
                            </div>
                            <!-- User dropdown menu -->
                            <ul class="head-list">
                                <li>
                                    <a href="/user_center/">
                                        <i class="demo-pli-male icon-lg icon-fw"></i>个人中心
                                    </a>
                                </li>
                            </ul>
                            <!-- Dropdown footer -->
                            <div class="pad-all text-right">
                                <a href="/logout/" class="btn btn-primary">
                                    <i class="demo-pli-unlock"></i>退出
                                </a>
                            </div>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End user dropdown-->
                </ul>
            </div>
            <!--================================-->
            <!--End Navbar Dropdown-->
        </div>
    </header>
    <!--===================================================-->
    <!--END NAVBAR-->
    <div class="boxed">
        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">
            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title">
                <h1 class="text-lg-center">健康数据仪表盘</h1>
            </div>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <!--End page title-->
            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">
                <h4 class="text-main pad-btm bord-btm">我的基本信息 </h4>
                <div class="row">
                    <div class="eq-height">
                        <div class="col-md-12 col-lg-4 eq-box-lg">
                            <!-- 身高图表 -->
                            <div class="col-lg-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">身高（cm）</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="morris-height" style="height:212px"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- 体重图表 -->
                            <div class="col-lg-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">体重（kg）</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="morris-weight" style="height:212px"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="eq-height">
                        <div class="col-md-12 col-lg-4 eq-box-lg">
                            <!-- 血糖图表 -->
                            <div class="col-lg-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">血糖（mmmol/L）</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="morris-blood-sugar"
                                             style="height:212px"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <h4 class="text-main pad-btm bord-btm"></h4>
                <div class="row">
                    <div class="eq-height">
                        <div class="col-md-12 col-lg-4 eq-box-lg">
                            <div class="col-lg-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">血压变化趋势（mmHg）</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="flot-bloodpressure" style="height:50vh"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <script>
                    $.fn.dataTable.ext.errMode = 'none';       //屏蔽掉报错弹窗
                    // 从 Django 模板中传递过来的数据
                    var weightData = {{ weight_data|safe }};
                    var heightData = {{ height_data|safe }};
                    var bloodSugarData = {{ blood_sugar_data|safe }};
                    var systolicDiastolicBpData = {{ systolic_diastolic_bp_data|safe }};

                    // 处理收缩压和舒张压数据
                    var systolicData = systolicDiastolicBpData.map(function (item) {
                        return [new Date(item.date).getTime(), item.systolic_bp];
                    });
                    var diastolicData = systolicDiastolicBpData.map(function (item) {
                        return [new Date(item.date).getTime(), item.diastolic_bp];
                    });

                    // 体重图表（Morris.js）
                    new Morris.Line({
                        element: 'morris-weight',
                        data: weightData,
                        xkey: 'date',
                        ykeys: ['weight'],
                        labels: ['体重'],
                        dateFormat: function (x) {
                            return new Date(x).toLocaleString(); // 精确到分钟
                        },
                        lineColors: ['#0b62a4'],
                        pointSize: 5,
                        gridLineColor: '#ddd',
                        xLabelAngle: 45,
                        resize: true,
                        hideHover: 'auto'
                    });

                    // 身高图表（Morris.js）
                    new Morris.Line({
                        element: 'morris-height',
                        data: heightData,
                        xkey: 'date',
                        ykeys: ['height'],
                        labels: ['身高'],
                        dateFormat: function (x) {
                            return new Date(x).toLocaleString(); // 精确到分钟
                        },
                        lineColors: ['#0b62a4'],
                        pointSize: 5,
                        gridLineColor: '#ddd',
                        xLabelAngle: 45,
                        resize: true,
                        hideHover: 'auto'
                    });

                    // 血糖图表（Morris.js）
                    new Morris.Line({
                        element: 'morris-blood-sugar',
                        data: bloodSugarData,
                        xkey: 'date',
                        ykeys: ['blood_sugar'],
                        labels: ['血糖'],
                        dateFormat: function (x) {
                            return new Date(x).toLocaleString(); // 精确到分钟
                        },
                        lineColors: ['#ff6347'],
                        pointSize: 5,
                        gridLineColor: '#ddd',
                        xLabelAngle: 45,
                        resize: true,
                        hideHover: 'auto'
                    });

                    $(function () {
                        // 准备数据
                        var systolicSeries = {
                            label: "收缩压 (mmHg)",
                            data: systolicData,
                            lines: {
                                show: true,
                                lineWidth: 2,
                                fill: false
                            },
                            points: {
                                show: true,
                                radius: 3
                            },
                            color: "#FF0000" // 红色
                        };

                        var diastolicSeries = {
                            label: "舒张压 (mmHg)",
                            data: diastolicData,
                            lines: {
                                show: true,
                                lineWidth: 2,
                                fill: false
                            },
                            points: {
                                show: true,
                                radius: 3
                            },
                            color: "#0000FF" // 蓝色
                        };

                        var allSeries = [systolicSeries, diastolicSeries];

                        // 配置选项
                        var options = {
                            series: {
                                shadowSize: 0
                            },
                            grid: {
                                borderWidth: 1,
                                borderColor: "#eeeeee",
                                hoverable: true,
                                clickable: true
                            },
                            xaxis: {
                                mode: "time",
                                timeformat: "%Y-%m",  // 这里将日期格式修改为年月 (yyyy-mm)
                                minTickSize: [1, "hour"],  // 每小时为最小刻度
                                tickDecimals: 0,
                                autoscaleMargin: 0.1,
                                tickFormatter: function (val, axis) {
                                    var date = new Date(val);
                                    var options = {year: 'numeric', month: '2-digit'};  // 格式化为 yyyy-mm
                                    return date.toLocaleDateString('en', options);
                                }
                            },
                            yaxis: {
                                min: 0,
                                tickSize: 20,
                                tickColor: '#eeeeee',
                                tickFormatter: function (val, axis) {
                                    return val + " mmHg";
                                }
                            },
                            legend: {
                                show: true,
                                position: 'nw',
                                margin: [15, 0]
                            },
                        };

                        // 绘制图表
                        $.plot("#flot-bloodpressure", allSeries, options);
                    });

                    // Flot tooltip
                    // =================================================================
                    $("<div id='flot-tooltip'></div>").css({
                        position: "absolute",
                        display: "none",
                        padding: "10px",
                        color: "#fff",
                        "text-align":"right",
                        "background-color": "#37474f",
                    }).appendTo("body");


                    $("#flot-bloodpressure").bind("plothover", function (event, pos, item) {

                        if (item) {
                            var x = item.datapoint[0].toFixed(2),  y = item.datapoint[1];
                            $("#flot-tooltip").html("<p class='morris-hover-row-label' >" + item.series.label + "</p>" + y)
                                .css({top: item.pageY+5, left: item.pageX+5})
                                .fadeIn(200);
                        } else {
                            $("#flot-tooltip").hide();
                        }

                    });
                </script>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">健康记录一览</h3>
                            </div>
                            <div class="panel-body">
                                <table id="health-profile-table" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th class="text-center">记录序号</th>
                                            <th class="text-center">记录时间</th>
                                            <th class="text-center">身高 (cm)</th>
                                            <th class="text-center">体重 (kg)</th>
                                            <th class="text-center">血压 (高/低 mmHg)</th>
                                            <th class="text-center">血糖 (mmol/L)</th>
                                            <th class="text-center">操作</th> <!-- 新增操作列 -->
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for health_profile in health_profiles %}
                                            <tr data-health-id="{{ health_profile.id }}">
                                                <td class="text-center">{{ forloop.counter }}</td>
                                                <td class="text-center"><span class="text-muted"><i class="fa fa-clock-o"></i> {{ health_profile.timestamp|date:"Y-m-d H:i:s" }}</span></td>
                                                <td class="text-center">{{ health_profile.height|default:"-"}}</td>
                                                <td class="text-center">{{ health_profile.weight|default:"-"}}</td>
                                                <td class="text-center">
                                                    {% if health_profile.systolic_bp and health_profile.diastolic_bp %}
                                                        {{ health_profile.systolic_bp }}/{{ health_profile.diastolic_bp }}
                                                    {% else %}
                                                        -
                                                    {% endif %}
                                                </td>
                                                <td class="text-center">{{ health_profile.blood_sugar|default:"-" }}</td>
                                                <td class="text-center">
                                                    <!-- 删除按钮 -->
                                                    <form method="POST" action="{% url 'delete_health_profile' health_profile.id %}">
                                                        {% csrf_token %}
                                                        <button type="submit" class="btn btn-danger btn-sm delete-btn">删除</button>
                                                    </form>
                                                </td>
                                            </tr>
                                        {% empty %}
                                            <tr>
                                                <td colspan="7">没有找到记录。</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <script>
                            var rowSelection = $('#health-profile-table').DataTable({
                                "responsive": true,
                                "language": {
                                    "paginate": {
                                        "previous": '<i class="demo-psi-arrow-left"></i>',
                                        "next": '<i class="demo-psi-arrow-right"></i>'
                                    }
                                }
                            });

                            $(document).ready(function() {
                                $('.delete-btn').click(function(e) {
                                    var row = $(this).closest('tr');
                                    var profileId = $(this).data('data-health-id');
                                    $.ajax({
                                        url: '/health_profile/delete/' + profileId + '/',
                                        type: 'POST',
                                        data: {
                                            'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()
                                        },
                                    });
                                });
                            });
                        </script>
                    </div>
                </div>
                <!--===================================================-->
                <!--End Data Table-->

            </div>
        </div>
    </div>
    <!--===================================================-->
    <!--END CONTENT CONTAINER-->
    <!--MAIN NAVIGATION-->
    <!--===================================================-->
    <nav id="mainnav-container">
        <div id="mainnav">
            <!--Menu-->
            <!--================================-->
            <div id="mainnav-menu-wrap">
                <div class="nano">
                    <div class="nano-content">
                        <!--Profile Widget-->
                        <!--================================-->
                        <div id="mainnav-profile" class="mainnav-profile">
                            <div class="profile-wrap">
                                <div class="pad-btm">
                                    <img class="img-circle img-sm img-border"
                                         src="/static/nifty/img/profile-photos/1.png"
                                         alt="Profile Picture">
                                </div>
                                <a href="#profile-nav" class="box-block"
                                   data-toggle="collapse" aria-expanded="false">
                                    <p class="mnp-name">{% if user.is_authenticated %}{{ user.username }}{% else %}
                                        未登录用户{% endif %}</p>
                                </a>
                            </div>
                        </div>
                        <ul id="mainnav-menu" class="list-group">
                            <!--Category name-->
                            <li class="list-header">健康中心</li>
                            <!--Menu list item-->
                            <li>
                                <a href="/index/">
                                    <i class="demo-psi-home"></i>
                                    <span class="menu-title">
												<strong>首页</strong>
											</span>
                                </a>
                            </li>
                            <!--Menu list item-->
                            <li>
                                <a href="#">
                                    <i class="demo-psi-boot-2"></i>
                                    <span class="menu-title">
												<strong>我的运动数据</strong>
											</span>
                                    <i class="arrow"></i>
                                </a>
                                <!--Submenu-->
                                <ul class="collapse">
                                    <li>
                                        <a href="/exercise_info/exercise_record/">查看运动数据</a>
                                    </li>
                                    <li>
                                        <a href="/exercise_info/add_exercise_record/">新增运动数据</a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a href="#">
                                    <i class="demo-psi-star"></i>
                                    <span class="menu-title">
												<strong>我的运动目标</strong>
											</span>
                                    <i class="arrow"></i>
                                </a>

                                <!--Submenu-->
                                <ul class="collapse">
                                    <li><a href="/exercise_info/exercise_goal/">查看运动目标</a></li>
                                    <li><a href="/exercise_info/add_exercise_goal/">新增运动目标</a></li>
                                </ul>
                            </li>

                            <!--Menu list item-->
                            <li class="active-sub active">
                                <a href="/health_profile/">
                                    <i class="demo-psi-receipt-4"></i>
                                    <span class="menu-title">
												<strong>我的健康数据</strong>
											</span>
                                    <i class="arrow"></i>
                                </a>
                                <!--Submenu-->
                                <ul class="collapse">
                                    <li class="active-link">
                                        <a href="/health_profile/">查看健康数据</a>
                                    </li>
                                    <li>
                                        <a href="/health_profile/add/">新增健康数据</a>
                                    </li>
                                    <li>
                                        <a href="/health_profile/analysis">健康分析</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="list-divider"></li>
                            <!--Category name-->
                            <li class="list-header">其他</li>
                            <!--Menu list item-->
                            <li>
                                <a href="/user_center/">
                                    <i class="demo-psi-male"></i>
                                    <span class="menu-title">
												<strong>个人中心</strong>
											</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--================================-->
            <!--End menu-->
        </div>
    </nav>
    <!--===================================================-->
    <!--END MAIN NAVIGATION-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->
</body>

</html>